<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>TiebaCodehighlight</title>
</head>
<body style="background:#fafafa!important">
	<div style="margin:100px auto; width:560px">
		<textarea id="code_source" style="width:550px;height:300px;padding:4px"></textarea>
		<input id="show_highlighted" type="button" value="ShowCanvas" style="height:60px; width:200px; margin:20px 0;float:right">
		<canvas id="show_highlighted_target" width="560" height="200"></canvas>
		<img id="output_img" src="" alt="">
	</div>

	<script src="prism.js"></script>
	<script src="prism_to_img.js"></script>
	<script>
		document.getElementById('show_highlighted').addEventListener('click', function(){
			var codeSource = document.getElementById('code_source').value;
			document.getElementById('output_img').src = (PrismToImg.draw(codeSource, 'css', {
				canvasElement : document.getElementById('show_highlighted_target'),
				margin:"10 0 10",
				fontFamily:"YaHei Consolas Hybrid",
			}).url());
		});
	</script>
</body>
</html>